<template>
  <div class="vip">
    <div class="vip-content">
      <div class="vip-title">用户设置</div>
      <div class="vip-content-box">
        <div class="vip-content-title">用户设置</div>
        <div class="title-line">
          <div class="line-txt">信息编辑</div>
        </div>
        <div class="form-content">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item>
              <el-avatar style="margin: auto" :src="form.avatar" :size="90" />
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="form.name" style="width:400px" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item type="password" label="二级密码">
              <el-input
                v-model="form.passwordTwo"
                placeholder="请输入二级密码"
              />
            </el-form-item>
            <el-form-item label="二级确认密码">
              <el-input
                v-model="form.passwordTwoQr"
                placeholder="请输入二级确认密码"
              />
            </el-form-item>
            <el-form-item label="短信验证码">
                <div class="msg-code">
                    <el-input
                      v-model="form.passwordTwoQr"
                      placeholder="请输入短信验证码"
                    />
                    <el-button style="margin-left: 1rem;">获取验证码</el-button>
                </div>
            </el-form-item>
            <el-form-item>
              <el-button style="margin: auto">编辑</el-button>
              <el-button style="margin: auto" type="primary" @click="onSubmit"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  password: "",
  passwordTwoQr: "",
  passwordTwo: "",
  nickname: "",
  phone: "",
  avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>
    <style scoped lang="less">
.vip {
  padding: 1.5rem;
  box-sizing: border-box;
  .vip-content {
    width: 80rem;
    margin: 0 auto;
    // background: #fcf;
    padding: 2rem;
    box-sizing: border-box;
    .vip-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 1.125rem;
      color: #000000;
      line-height: 1.125rem;
      text-align: left;
      font-style: normal;
    }
    .vip-content-box {
      margin-top: 1.5rem;
      background: #fff;
      padding: 1.5rem;
      box-sizing: border-box;
      border-radius: 1rem;
      .vip-content-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.625rem;
        color: #000000;
        text-align: left;
        font-style: normal;
      }
      .title-line {
        border-bottom: 1px solid rgba(0, 0, 0, 0.85);
        margin: 2rem 0;
        .line-txt {
          width: 86px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background: rgba(0, 0, 0, 0.85);
          border-radius: 8px 8px 0px 0px;
        }
      }
      .form-content {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.msg-code{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
</style> 